<template>
    <div id="system">
        <el-container class="cont">
            <el-header>
                <div class="img">
                    <h1>蜗牛保险管理系统</h1>
                </div>
                <div class="login">
                    <span>欢迎</span><span class="red">{{ user }}</span
                    ><span v-if="curr == 'Sidebar'">管理员</span>
                    <span v-else>销售员</span>
                    <div class="quit">
                        <span @click="quit()">退出</span>
                    </div>
                </div>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <Sidebar v-if="curr == 'Sidebar'" />
                    <Sidebar1 v-else></Sidebar1>
                </el-aside>
                <el-main><router-view /> </el-main>
            </el-container>
            <el-footer height="50px">Footer</el-footer>
        </el-container>
    </div>
</template>

<script>
import Sidebar from "./Sidebar.vue";
import Sidebar1 from "./Sidebar1.vue";
export default {
    data() {
        return {
            curr: localStorage.manager,
            user: JSON.parse(localStorage.user).account,
        };
    },
    components: {
        Sidebar,
        Sidebar1,
    },
    methods: {
        quitSuccess() {
            this.$notify({
                message: "退出当前帐号成功",
                type: "success",
            });
        },
        quit() {
            this.quitSuccess();
            this.$router.push("/");
        },
    },
};
</script>

<style lang="scss">
#system {
    .cont {
        height: 100vh;
    }
    .cont .el-aside {
        background-color: #545c64;
    }
    .cont .el-header {
        background: rgba(35, 14, 54, 0.877);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .cont .el-header .img {
        display: flex;
        align-items: center;
    }
    .cont .el-header .img h1 {
        color: rgba(160, 150, 150, 0.671);
        font-size: 32px;
    }
    .cont .el-header span {
        color: white;
    }
    .cont .el-footer {
        background: rgba(22, 7, 36, 0.877);
    }
    .el-header,
    .el-footer {
        background-color: #b3c0d1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #d3dce6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
    .cont .el-header .red {
        color: rgb(247, 57, 57);
        font-size: 18px;
    }
    .el-aside[data-v-5d8b3899] {
        text-align: left;
    }
    .login {
        &:hover {
            .quit {
                height: 60px;
                transition: 0.4s;
            }
        }
        position: relative;
        .quit {
            background-color: white;
            position: absolute;
            border-radius: 10px;
            width: 90px;
            height: 0px;
            overflow: hidden;
            z-index: 1;
            span {
                color: black;
                cursor: pointer;
            }
        }
    }
}
</style>